<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Range - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <style>
    .range-part::part(bar) {
      background: red;
    }

    .range-part::part(tick) {
      background: purple;
    }

    .range-part::part(bar-active) {
      background: green;
    }

    .range-part::part(tick-active) {
      background: orange;
    }

    .range-part::part(knob) {
      background: hotpink;
    }

    .ios.range-part::part(pin) {
      background: orange;

      top: -13px;

      height: 20px;

      line-height: 4px;
      border-radius: 4px;

      transform: translate(0, 0, 0);
    }

    .md.range-part::part(pin),
    .md.range-part::part(pin)::before {
      background: orange;
    }
  </style>
<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Range - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">
      <ion-list>
        <ion-list-header>
          <ion-label>
            Range color
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-range value="20"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range value="60" color="light" step="10" pin="true"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range value="80" color="dark" step="10" snaps="true" pin="true"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range pin="true" color="secondary" value="86">
            <ion-icon small name="sunny" slot="start"></ion-icon>
            <ion-icon name="sunny" slot="end"></ion-icon>
          </ion-range>
          <ion-range pin="true" color="danger" value="54">
            <ion-icon small name="thermometer" slot="start"></ion-icon>
            <ion-icon name="thermometer" slot="end"></ion-icon>
          </ion-range>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Stacked Label</ion-label>
          <ion-range value="40">
            <ion-label slot="start">Start</ion-label>
            <ion-label slot="end">End</ion-label>
          </ion-range>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Dynamic Value
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-range pin="true" step="0" color="secondary" id="progressValue"></ion-range>
          <div id="progressValueResult" slot="end"></div>
        </ion-item>
        <ion-item>
          <ion-range pin="true" color="danger" id="brightnessValue"></ion-range>
          <div id="brightnessValueResult" slot="end"></div>
        </ion-item>
        <ion-item>
          <ion-range pin="true" color="dark" id="contrastValue"></ion-range>
          <div id="contrastValueResult" slot="end"></div>
        </ion-item>
        <ion-button onclick="increaseRangeValues()">
          Increase Values
        </ion-button>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Mode
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-range value="50" mode="md"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range value="50" mode="ios"></ion-range>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Options
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-range class="range-part" min="-200" max="200" step="10" snaps="true" pin="true" dual-knobs="true"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range pin="true"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range min="-200" max="200" step="10" snaps="true" pin="true"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range dual-knobs="true" id="multiKnob"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range id="debounce" debounce="5000"></ion-range>
        </ion-item>
      </ion-list>

      <ion-button onclick="elTest()">Test</ion-button>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Coupled sliders
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-range min="0" value="0" max="50" id="minRange"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range min="50" value="100" max="100" id="maxRange"></ion-range>
        </ion-item>
        <ion-item>
          <ion-range min="0" value="50" max="100" id="targetRange"></ion-range>
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-app>

  <script>
    const progressValue = document.getElementById('progressValue');
    const brightnessValue = document.getElementById('brightnessValue');
    const contrastValue = document.getElementById('contrastValue');

    const ranges = [progressValue, brightnessValue, contrastValue];

    for (var i = 0; i < ranges.length; i++) {
      var el = ranges[i];
      el.value = (i + 1) * 10;
      updateRangeResult(el);

      el.addEventListener('ionChange', function (ev) {
        updateRangeResult(ev.target);
      });
    }

    progressValue.addEventListener('ionChange', function (ev) {
      console.log(ev.detail.value);
      brightnessValue.value = ev.detail.value;
      contrastValue.value = ev.target.value;
    });


    function updateRangeResult(el) {
      var resultEl = document.getElementById(`${el.id}Result`);
      resultEl.innerHTML = Math.round(el.value);
    }

    function increaseRangeValues() {
      for (var i = 0; i < ranges.length; i++) {
        var el = ranges[i];
        var newValue = el.value + 10;

        if (newValue > 100) {
          newValue = 10;
        }

        el.value = newValue;
      }
    }

    var knob = document.getElementById('multiKnob')
    var debounceRange = document.getElementById('debounce')
    knob.value = {
      lower: 33,
      upper: 60
    }
    knob.addEventListener('ionFocus', function (ev) {
      console.log('focus', ev)
    })
    knob.addEventListener('ionBlur', function (ev) {
      console.log('blur', ev)
    })
    knob.addEventListener('ionChange', function (ev) {
      console.log('change', ev)
    })
    debounceRange.addEventListener('ionChange', function (ev) {
      console.log('change', ev)
    })

    function elTest() {
      var range = document.getElementById('range');
      range.disabled = !range.disabled;
    }

    const minRange = document.getElementById('minRange');
    const maxRange = document.getElementById('maxRange');
    const targetRange = document.getElementById('targetRange');

    minRange.addEventListener('ionChange', function(ev) {
      targetRange.min = ev.detail.value;
    })

    maxRange.addEventListener('ionChange', function(ev) {
      targetRange.max = ev.detail.value;
    })

    const rangePart = document.querySelector('.range-part');
    rangePart.value = {
      lower: '-100',
      upper: '100'
    }
  </script>
</body>

</html>
